<template>
  <div class="content">
    <div class="navbar">
      <div class="navbarLeft">
        <div v-if="isShow" style="width: 200px">
          <el-input></el-input>
        </div>
      </div>
      <div class="navbarList">
        <div class="navButtonWD" @click="showInputSearch">
          <span>
            <el-icon><Search /></el-icon> </span
          >SEARCH
        </div>
        <div class="navButtonWD1">BOOOK A PROJECT</div>
        <div class="navButtonWD">CONTENT</div>
        <div class="navButtonWD">EVENTS</div>
        <div class="navButtonWD" @click="goLogoin">LOGIN</div>
      </div>
    </div>
    <div class="content-header">
      <div class="content-header-banxin">
        <!-- <div class="content-header-banxin-navbar">
          <div class="content-header-banxin-navbar-logo"></div>
          <div class="content-header-banxin-navbar-list"></div>
          <div class="content-header-banxin-navbar-button">3</div>
        </div> -->
        <div class="content-header-body">welcom to TADFENG</div>
      </div>
    </div>
    <div class="content-bodyOne">
      <div class="content-banxin">
        <div class="content-bodyOne-text">
          Leader in 2024 Gartner® Magic Quadrant™ for Voice of the Customer
        </div>
        <div class="content-bodyOne-button">
          <span style="font-size: 24px; margin-right: 10px"
            ><el-icon><Right /></el-icon
          ></span>
          <span style="font-size: 30px">Read More</span>
        </div>
      </div>
    </div>
    <div class="content-bodyTwo">
      <div class="content-bodyTwo-banxin">
        <div class="content-bodyTwo-banxin-top">
          <div style="font-size: 32px; font-weight: bold">
            Human Experience (HX):<br />
            A new era for experience & research technology
          </div>
          <div style="margin-top: 40px; font-size: 28px">
            Trusted by over 2,500 customers, in over 100 countries
          </div>
          <div
            style="
              display: flex;
              width: 300px;
              margin-top: 40px;
              justify-content: space-around;
            "
          >
            <el-button round size="large">
              Play Video<el-icon class="el-icon--right"><ArrowRight /></el-icon>
            </el-button>
            <el-button round size="large">
              Learn More<el-icon class="el-icon--right"><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="content-bodyTwo-banxin-bottom">
          <div class="content-bodyTwo-banxin-bottom-left">
            <div style="font-size: 32px; font-weight: bold">
              Market research
            </div>
            <div style="font-size: 24px; margin-top: 20px">
              Get to the top with the world’s number 1 market research
              technology platform. From sample and panel management,
              comprehensive surveying, advanced analytics, reporting, to data
              visualization and more. We’re here to help you deliver compelling
              research, to any requirement.
            </div>
            <div style="margin-top: 20px">
              <el-button round size="large">
                Learn More<el-icon class="el-icon--right"
                  ><ArrowRight
                /></el-icon>
              </el-button>
            </div>
          </div>
          <div class="content-bodyTwo-banxin-bottom-right">
            <div style="font-size: 32px; font-weight: bold">Experience</div>
            <div style="font-size: 24px; margin-top: 20px">
              Forsta HX is the ultimate Human Experience platform, to help you
              enhance customer, employee, patient, and local experience. Improve
              customer retention, drive revenue growth, and enhance operational
              efficiencies. Gather, analyze, visualize and act on insights,
              everywhere.
            </div>
            <div style="margin-top: 20px">
              <el-button round size="large">
                Learn More<el-icon class="el-icon--right"
                  ><ArrowRight
                /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bodyThree">
      <div class="content-bodyThree-banxin">
        <div class="content-bodyThree-banxin-left">
          <div style="color: white">RETAIL HX</div>
          <div
            style="
              color: white;
              font-size: 32px;
              font-weight: bold;
              margin-top: 40px;
            "
          >
            Retail is a human business. Power it with with HX.
          </div>
          <div
            style="
              margin-top: 40px;
              color: white;
              font-weight: bold;
              font-size: 24px;
            "
          >
            Pull customer, employee and brand data together. So you get the full
            picture on cause, effect, and what happens next. Retail HX from
            Forsta helps reveal the people behind the data points, so you can
            sell smarter and perform better.
          </div>
          <div style="margin-top: 40px">
            <el-button round size="large">
              Learn More<el-icon class="el-icon--right"><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>

        <div class="content-bodyThree-banxin-right">
          <div class="bgimg"></div>
        </div>
      </div>
    </div>
    <div class="content-bodyFour">
      <div class="content-bodyFour-banxin">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="item in lbList" :key="item">
            <div
              :style="{
                backgroundImage: `url(${item.url})`,
                height: `${100}%`,
                width: `${100}%`,
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                paddingTop: '20px',
                boxSizing: 'border-box',
              }"
            >
              <!-- <div style="width: 100px;height: 100px">
                <img :src="item.url" alt=""  width="100%" height="80%" />
            </div> -->
              <div style="font-weight: bold">{{ item.title }}</div>
              <div style="margin-top: 20px; width: 300px" class="itemText">
                {{ item.content }}
              </div>
              <div class="lbButton">
                <span style="font-size: 18px; margin-right: 10px"
                  ><el-icon><Right /></el-icon
                ></span>
                <span style="font-size: 24px">Read More</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
let isShow = ref(false);
let lbList = ref([
  {
    title: "News",
    content:
      "PG Forsta Named a Leader in the 2024 Gartner® Magic Quadrant™ for Voice of the Customer",
    url: "/src/assets/images/PG-Forsta-has-been-named-a-Leader-in-the-2024-Gartner-PR-V4.webp",
  },
  {
    title: "News, Qualitative Research, Quantitative research",
    content:
      "Cint and Forsta form industry-first partnership to drive a reduction in survey fraud",
    url: "/src/assets/images/Cint-PR-630x410.webp",
  },
  {
    title: "Customer experience, News",
    content:
      "Forsta acquires crowdsourcing and innovation platform HelloIgnite",
    url: "/src/assets/images/Forsta-x-HelloIgnite-Press-Release-FINAL_v3-630x410.webp",
  },
  {
    title: "Customer experience, News",
    content:
      "Forsta and Rio SEO combine to provide technology solutions spanning the entire customer journey, from discovery to purchase to brand reputation & advocacy",
    url: "/src/assets/images/MicrosoftTeams-image-32-630x410.webp",
  },
  {
    title: "Webinar",
    content: "Make the complex simple",
    url: "/src/assets/images/SM-0042_Make-the-complex-simple_Forsta_blog_header-630x410.webp",
  },
  {
    title: "News",
    content:
      "Press Ganey advances technology via acquisition of Forsta, a global leader in Market Research, Customer Experience and Employee Experience",
    url: "/src/assets/images/MicrosoftTeams-image-4-630x410.webp",
  },
  {
    title: "Webinar",
    content: "Take your reporting into the future with Forsta",
    url: "/src/assets/images/SM-0042_Into_The_Future_With_Forsta_blog_header-630x410.webp",
  },
  {
    title: "White paper",
    content: "Introducing the future of Experience & Research technology",
    url: "/src/assets/images/HX-630x410.webp",
  },
  {
    title: "Case study",
    content: "Giving eBay the human touch",
    url: "/src/assets/images/eBay-1-630x410.webp",
  },
]);
/**
 * 点击搜索控制显示隐藏input
 */
const showInputSearch = () => {
  isShow.value = !isShow.value;
};
import { useRouter } from "vue-router";
const router = useRouter();
const goLogoin = () => {
  router.push("/login");
};
// onMounted(() => {
//   sessionStorage.setItem("isInPage", true);
// });
</script>
<style lang="scss" scoped>
.navbar {
  height: 40px;
  width: 100%;
  display: flex;
  background-color: #dedede;
  position: sticky;
  top: 0;
  .navbarList {
    height: 100%;
    width: 50%;
    flex: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .navbarLeft {
    flex: 60%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
}
.navButtonWD {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navButtonWD1 {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navButtonWD:hover {
  color: blueviolet;
}
.navButtonWD1:hover {
  color: blueviolet;
}
.content-header {
  width: 100%;
  .content-header-banxin {
    width: 80%;
    margin: 0 auto;
    height: 920px;
    .content-header-banxin-navbar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .content-header-banxin-navbar-logo {
        flex: 10%;
        height: 80px;
        background-image: url("../../assets//logo/logo.png");
        background-position: bottom;
        background-repeat: no-repeat;
      }
      .content-header-banxin-navbar-list {
        flex: 80%;
        height: 80px;
        background-color: aqua;
      }
      .content-header-banxin-navbar-button {
        flex: 10%;
        height: 80px;
        background-color: slategray;
      }
    }
    .content-header-body {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 128px;
      font-weight: bold;
      height: 840px;
      width: 100%;
    }
  }
}
.content-bodyOne {
  width: 100%;
  background-color: #004d63;
  .content-bodyOne-text {
    padding-top: 10px;
    box-sizing: border-box;
    font-size: 28px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content-bodyOne-button {
    margin-top: 10px;
    cursor: pointer;
    transition: 0.5s;
    width: 200px;
    &:hover {
      color: blueviolet;
      transform: translateX(10px);
    }
  }
}
.content-banxin {
  width: 80%;
  height: 100px;
  margin: 0 auto;
}
.content-bodyTwo {
  width: 100%;
  background-color: #d2ffff;
  .content-bodyTwo-banxin {
    width: 80%;
    height: 700px;
    margin: 0 auto;
    .content-bodyTwo-banxin-top {
      height: 300px;
      padding-top: 40px;
      box-sizing: border-box;
    }
    .content-bodyTwo-banxin-bottom {
      display: flex;
      gap: 20px;
      .content-bodyTwo-banxin-bottom-left {
        flex: 50%;
      }
      .content-bodyTwo-banxin-bottom-right {
        flex: 50%;
      }
    }
  }
}
.content-bodyThree {
  width: 100%;
  background-color: #004d63;
  .content-bodyThree-banxin {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    display: flex;
    .content-bodyThree-banxin-left {
      padding-top: 40px;
      box-sizing: border-box;
      flex: 50%;
    }
    .content-bodyThree-banxin-right {
      flex: 50%;
      padding: 20px;
      box-sizing: border-box;
      .bgimg {
        width: 100%;
        height: 100%;
        background-image: url("../../assets//images//PINK-CHEV-1-1.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
  }
}
.content-bodyFour {
  width: 100%;
  .content-bodyFour-banxin {
    width: 80%;
    height: 400px;
    margin: 0 auto;
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.lbButton {
  margin-top: 20px;
  transition: 0.5s;
  &:hover {
    transform: translateX(20px);
    color: blueviolet;
  }
}
.itemText:hover {
  color: blueviolet;
}
</style>
